// out: ../css/

@import "./base";

@vw: 3.75vw;

// 头部导航栏
header {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 1000;/* 确保 z-index 足够高 */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 (12 / @vw) 0 (18 / @vw);
        height: (44 / @vw);
        .left {
            .Navbar_logo {
                font-size: (28 / @vw);
                color: #fb7299;
            }
        }
        .right {
            display: flex;
            align-items: center;
            .ic_search_tab {
                font-size: (22 / @vw);
                color: #ccc;
            }
            .login {
                margin-left: (24 / @vw);
                width: (24 / @vw);
                height: (24 / @vw);
            }
            
            .download {
                margin-left: (24 / @vw);
                width: (72 / @vw);
                height: (24 / @vw);
            }
        }
    }
}

// 菜单
.menu {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: (40 / @vw);
    border-bottom: 1px solid #eee;
    height: (39 / @vw);
    .tab {
        ul {
            display: flex;
            justify-content: space-between;
            align-items: center;
            li {
                padding: 0 (16 / @vw);
                width: (60 / @vw);
                height: (38 / @vw);
                line-height: (38 / @vw);
                a {
                    display: block;
                    width: (28 / @vw);
                    height: (38 / @vw);
                    font-size: (14 / @vw);
                    color: #333;
                }
                &.active {
                    a {
                       color: #fb7299;
                        border-bottom: 2px solid #fb7299;
                    }
                }
            }
        }
    }
    .more {
        position: absolute;
        right: 0;
        top: 0;
        width: (40 / @vw);
        height: (40 / @vw);
        text-align: center;
        line-height: (40 / @vw);
        color: #ccc;
        .general_pulldown_s {
            font-size: (20 / @vw);
        }
    }
}

// 内容
.content {  
    padding: (84 / @vw) (5 / @vw) (5 / @vw);
    .video-list {
        display: flex;
        flex-wrap: wrap;
        .video-item {
            padding: (8 / @vw) (5 / @vw);
            width: 50%;

            .card {
                position: relative;
                .count {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    display: flex;
                    justify-content: space-between;
                    padding: (8 / @vw);
                    background-image: linear-gradient(to top,
                    rgba(0, 0, 0, 0.6),
                    rgba(0, 0, 0, 0));
                    width: 100%;
                    color: #fff;
                    font-size: (12 / @vw);
                    p {
                        position: relative;
                        z-index: 1;
                        i {
                            vertical-align: middle;
                            font-size: (16 / @vw);
                        }
                        span {
                            margin-left: (4 / @vw);
                        }
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
                        z-index: -1;//确保背景在文本的后面，因为背景图是渐变的，这样文本就不会变模糊
                    }
                }
            }

            .title {
                margin-top: (6 / @vw);
                font-size: (12 / @vw);
                color: #333;
            }
        }
    }
}

// 按钮
.btn {
    z-index: 1000;
    position: fixed;
    left: 0;
    bottom: (30 / @vw);
    padding: (12 / @vw);
    width: 100%;
    height: (36 / @vw);
    a {
        display: block;
        height: (36 / @vw);
        background-color: #fb7299;
        border-radius: (18 / @vw);
        text-align: center;
        line-height: (36 / @vw);
        box-shadow:  0 0 3.2vw rgba(0, 0, 0, 0.2);;
        .Navbar_logo {
            font-size: (16 / @vw);
            color: #fff;
        }
        span {
            margin-left: (5 / @vw);
            font-size: (14 / @vw);
            color: #fff;
        }
    }
}